import MoveArea from './MoveArea'

class Food {
  // 食物的dom元素
  private element: HTMLElement
  private foodStyleList = [
    '🍇',
    '🍈',
    '🍉',
    '🍊',
    '🍌',
    '🍍',
    '🍎',
    '🍏',
    '🍓',
    '🍑',
    '🍒',
    '🥝',
    '🌽',
    '🥕',
    '🍆',
    '🥦',
    '🧅',
    '🧅',
    '🥜',
    '🍄',
    '🧀',
    '🍖',
    '🥩',
    '🍔',
    '🍕',
    '🍿',
    '🍚',
    '🍜',
    '🥮',
    '🥟',
    '🍦',
    '🍬',
    '🍭',
    '🍷',
    '🍺',
    '🍩',
    '🍧',
    '🍰'
  ]
  constructor() {
    this.element = document.getElementById('food')!
    this.resetStatus()
  }

  /**
   * 改变食物的位置
   */
  public changePostion() {
    //10vw/1vw=10
    //10再减1=9
    let wnum = MoveArea.width / this.width - 1
    let hnum = MoveArea.height / this.height - 1
    //随机0~9
    wnum = Math.random() * wnum
    hnum = Math.random() * hnum
    //9*1vw=9vw
    //left=9vw
    //wnum必须是整数，蛇一节身体的大小和食物大小一样，
    //蛇移动时是移动一节身体的宽度或者高度
    //判断蛇是否吃到食物是通过判断蛇头部的坐标和食物的坐标是否一致来判断的，
    //因此食物的坐标也要是其宽度高度的整数倍。
    this.element.style.left = Math.floor(wnum) * this.width + 'px'
    this.element.style.top = Math.floor(hnum) * this.height + 'px'
    //改变食物样式
    this.changeFoodStyle()
  }

  //改变食物的样式
  public changeFoodStyle() {
    const index = Math.round(Math.random() * (this.foodStyleList.length - 1))
    this.element.innerText = this.foodStyleList[index]
  }

  /**
   * 重设状态
   */
  public resetStatus() {
    this.changePostion()
  }

  get postionX() {
    return MoveArea.getRelativeCoordinates(this.element).x
  }

  get postionY() {
    return MoveArea.getRelativeCoordinates(this.element).y
  }

  get width() {
    return this.element.getBoundingClientRect().width
  }

  get height() {
    return this.element.getBoundingClientRect().height
  }
}

export default new Food()
